<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  progress: {
    type: Number,
    default: 50,
    // validator: (value) => {
    //   console.log('p: ', value)
    //   return value >= 0 && value <= 100
    // },
  },
  color: {
    type: String,
    default: '#007bff',
  },
  text: {
    type: String,
    default: undefined,
  },
})

const progressWidth = computed(() => {
  return `${props.progress || 0}%`
})

const progressText = computed(() => {
  return props.text || `${props.progress}%`
})

const progressColor = computed(() => {
  if (props.progress >= 100) {
    return '#33AD7C'
  } else {
    return '#F0883A'
  }
})
</script>

<template>
  <div class="progress-bar-container w-full flex-row-start-center">
    <div class="progress-bar flex-1">
      <div
        class="progress-bar-fill"
        :style="{ width: progressWidth, backgroundColor: progressColor }"
      />
    </div>
    <div class="progress-text ml-16px">
      {{ progressText }}
    </div>
  </div>
</template>

<style scoped>
.progress-bar {
  height: 8px;
  background-color: #eee;
}
.progress-bar-fill {
  height: 8px;
  border-radius: 4px;
}
.progress-text {

}
</style>
